/* 设置页面响应式优化 */

/* 640px宽度以下的特殊优化 */
@media (max-width: 640px) {
  /* 优化标题显示 */
  h1.settings-title {
    font-size: 1.5rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80% !important;
    margin: 0 auto !important;
  }

  /* 优化搜索框容器的父元素 */
  div.mb-8 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 优化搜索框容器 */
  div.settings-search {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 优化搜索框输入元素 */
  div.settings-search input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 1rem !important;
  }

  /* 优化选项卡容器 */
  div.settings-tabs-container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0.5rem !important;
    margin-top: 1rem !important;
    margin-left: -0.5rem !important;
    margin-right: -0.5rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* 优化选项卡按钮容器 */
  div.settings-tabs-container > div {
    display: flex !important;
    width: max-content !important;
  }

  /* 优化选项卡按钮 */
  button.settings-tab {
    flex: 0 0 auto !important;
    min-width: auto !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    margin: 0 0.25rem !important;
  }

  /* 确保内容区域适应屏幕宽度 */
  div.content-centered {
    padding: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* 优化设置区块 */
  div.rounded-lg.shadow-sm {
    margin-bottom: 1rem !important;
    padding: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 优化设置标题 */
  h2.text-responsive.font-medium {
    font-size: 1.1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* 480px宽度以下的特殊优化 */
@media (max-width: 480px) {
  /* 进一步减小选项卡按钮内边距 */
  button.settings-tab {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.75rem !important;
  }

  /* 减小标题字体大小 */
  h1.settings-title {
    font-size: 1.25rem !important;
  }
}

/* 320px宽度以下的特殊优化 */
@media (max-width: 320px) {
  /* 极小屏幕下进一步减小选项卡按钮内边距和字体 */
  button.settings-tab {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.6875rem !important; /* 11px */
  }

  /* 极小屏幕下进一步减小标题字体大小 */
  h1.settings-title {
    font-size: 1.125rem !important; /* 18px */
    max-width: 90% !important;
  }

  /* 确保设置区块内容适应极小屏幕 */
  div.rounded-lg.shadow-sm {
    padding: 0.375rem !important;
  }

  /* 优化设置标题在极小屏幕下的显示 */
  h2.text-responsive.font-medium {
    font-size: 1rem !important;
  }
}

/* 移除重复的媒体查询，合并到480px优化中 */